<template>
	<view class="my-search-container" :style="{'background-color':bgColor}">
		<!-- 标签 -->
		<!-- <h1>111111</h1> -->
		<!-- 组件 都是uniapp当中内置的组件 -->
		<!-- <text></text> -->
		<!-- <view class=""></view> -->
		<!-- 当前 my-search  组件   自定的组件
		 在components文件夹下创建组件 
		 使用组件 直接使用即可
		 -->
		<view class="my-search-box" @click="handlerEvent">
			<!-- uni-icons   -->
			<uni-icons type="search" size="30"></uni-icons>
			<text class="placeholder">搜索</text>
		</view> 
	</view>
</template>

<script>
	export default {
		name:"my-search",
		props:{
			bgColor:{
				type:String,
				default:'#c00000'
			}
		},
		data() {
			return {
			};
		},
		methods:{
			handlerEvent(){
				console.log('在搜索框上绑定事件');
				uni.navigateTo({
					url:'/subpkg/search/search'
				});
				this.$emit('click')
			}
		}
	}
	
	
	/* 
	 主页和分类当中的搜索实际 按钮 拍个版即可   点击它 进入搜索页面
	 uni-ui安装
	 1.mysearch封装完毕   home cate
	 cate scroll-view height 视口的可用高度  getSystemInfoSync()  -  50 (mySearch 100rpx)
	 2. 拓展：
	  my search自定义的一个组件  bgc red    目的 可以控制mySearch 的背景色
	  
	  my-search子组件  home  cate父组件
	  目的控制背景色  必须动态  data 初始值
	  父传子 props 
	 3. 点击home  cate当中的搜索跳转到 搜索页面
	 点击事件 
	 
	 
	 跳转动作 前提 有搜索页面  创建搜索页面
	 search  在分包
	 url:/subpkg/search/search
	 
	 
	 my-search内部绑定事件没有
	 
	 事件就得绑定到my-search上
	 
	 my-search 组件   你可以在元素标签上直接绑定事件@click 进行绑定
	  
	  
	  
	 
	 
	 */
</script>

<style lang="scss">
.my-search-container{
	// background-color: #c00000;
	height: 100rpx;
	padding: 0 20rpx;
	display: flex;
	align-items: center;
	.my-search-box{
		height: 70rpx;
		background-color: #fff;
		width: 100%;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
</style>